<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(20.853679, 106.681824), //HP-VN
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        for (var i = 0; i < 1; i++) {
            var position = new google.maps.LatLng('20.846417','106.702225');
            var marker = new google.maps.Marker({
                position: position,
                map: map
            });

            marker.setTitle((i + 1).toString());
            attachSecretMessage(marker, 'Địa chỉ: số 273C Đông Khê - Ngô Quyền - Hải Phòng<br />Tel: +84905353579');
        }
    }

    // The five markers show a secret message when clicked
    // but that message is not within the marker's instance data
    function attachSecretMessage(marker, description) {
        var infowindow = new google.maps.InfoWindow({
            content: description
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(marker.get('map'), marker);
        });

        infowindow.open(marker.get('map'), marker);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="box-prd">
    <div class="prd-title">
        <h3>
            Bản đồ
        </h3>
    </div>
    <div class="prd-content">
        <div class="view-article">
            <div id="map-canvas" style="width:100%;height:500px;"></div>
        </div>
    </div>
</div>